<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-repeat.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/array-selector.html">
<dom-module id="user-list">
  <template>
    <style>
      :host{
        display: block;
      }
      .item{
          border-bottom: 1px solid #ccc;
          cursor: pointer;
      }
    </style>
    <template is="dom-repeat" id="userList" items="{{users}}"
        >
        <div class="item" on-click="onCheck">
            <span>index:#{{index}}</span><br />
            <span>name:{{item.name}}</span><br />
            <span>age:{{item.age}}</span>
        </div>
    </template>

    <array-selector id="selector" items="{{users}}" selected="{{selected}}"></array-selector>

    <form>
      姓名：<input name="name" value="{{selected.name}}"><br />
      年龄：<input type="number" name="age" value="{{selected.age}}">
    </form>
  </template>

  <script>
    /**
     * @RepeatDemo
     * @polymer
     */
    class UserList extends Polymer.Element {
      static get is() { return 'user-list'; }
      static get properties(){
        return {
          users:{
            type: Array,
            value:[{
                name:"zhongzhong",
                age:25
            },{
                name:"google",
                age:30
            },{
                name:"somebody",
                age:12
            }]
          }
        }
      }
      onCheck(e){
          let item = this.$.userList.itemForElement(e.target);
          this.$.selector.select(item);
      }
    }
    window.customElements.define(UserList.is, UserList);

  </script>
</dom-module>


